<!-- 个人信息 -->
<template>
	<view class="ui-container">
    <t-header @back="clickNavBackFn">个人信息</t-header>
		<!-- content -->
		<view class="ui-content">
			<view class="ui-c-content">
				<tui-list-cell arrow padding="30rpx 34rpx">
					<view class="cell padding-right">
						<view class="label">头像</view>
						<image @click="chooseAvatar" class="avatar-sm"
							:src="avatar?avatar:'/static/images/icons/icon_default_header.png'" mode=""></image>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="30rpx 34rpx">
					<view class="cell">
						<view class="label">账号</view>
						<input type="text" @blur="updateUser" v-model="nickname"
							class="text-right text-nomal text-gray" />
					</view>
				</tui-list-cell>
				<tui-list-cell arrow padding="30rpx 34rpx" @click="changePwt">
					<view class="cell padding-right">
						<view class="label">密码</view>
						<view>修改</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :unlined="true" padding="30rpx 34rpx">
					<view class="cell">
						<view class="label">手机号</view>
						<view class="text-gray">{{mobile}}</view>
					</view>
				</tui-list-cell>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref, inject} from 'vue';
import {onLoad} from '@dcloudio/uni-app';

const tui = inject('tui');

import THeader from '@/components/views/t-header/index.vue'; // 头部组件

// store
import {useUserStore} from '@/store/user.js';
// user
const userStore = useUserStore();

// api
import {userProfile} from '@/api/user.js';

// 点击返回
const clickNavBackFn = () => {
	const pages = getCurrentPages();
	if (pages.length >= 2) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/my/index'
		});
	}
};

const avatar = ref('');
const nickname = ref('');
const mobile = ref('');

onLoad(() => {
	userStore.syncUserInfo().then(user => {
		nickname.value = user.nickname;
		avatar.value = user.avatar
		const reg = /(\d{3})\d{4}(\d{4})/;
		mobile.value = user.mobile.replace(reg, "$1****$2");
	});
});

const updateUser = () => {
	console.log(avatar.value.split("/"))
	console.log(avatar.value.split("/")[0])
	console.log(avatar.value.split("/")[0] + "//" + avatar.value.split("/")[2])
	console.log(avatar.value.split("/")[3])
	console.log(avatar.value.split("/")[4])
	console.log(avatar.value.split("/")[5])
	// return
	userProfile({
		nickname: nickname.value,
		// avatar:"76d630f6732dda0d79a53abed2679fd9.jpg",
		// avatar1:this.avatar.split("/")[0]+"//"+this.avatar.split("/")[2],
		// avatar4:this.avatar.split("/")[3],
		// avatar5:this.avatar.split("/")[4],
		avatar: avatar.value.split("/")[5],
		qq: '',
		jiami: 1
	}).then(res => {
		uni.showToast({
			icon: 'none',
			title: res.msg
		});
	})
};

const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		success: (e) => {
			tui.uploadFile(null, e.tempFilePaths[0]).then(res => {
				console.log(res.fullurl);
				avatar.value = res.fullurl
				updateUser();
			})
		}
	});
};

const changePwt = () => {
	uni.navigateTo({
		url: '/pages/setting/change-pwt'
	});
};
</script>

<style lang="scss" scoped>
.ui-container {
	display: flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;

	.ui-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 18rpx 26rpx;
		
		.ui-c-content {
			width: 100%;
			height: 472rpx;
			padding: 8rpx 48rpx 8rpx 20rpx;
			border-radius: 34rpx;
			background: #FFFFFF;
			box-sizing: border-box;
		}
	}
}

.cell {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.label {
		flex: 1;
		color: #373737;
		font-size: 32rpx;
		font-weight: 500;
		font-family: PingFangSC, PingFang SC;
	}
}
</style>